<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <html lang="en">
        <head>
            <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
            <div th:include="common.html"></div>
            <title>菜单管理</title>
        </head>
        <style>
            .container-fluid ul{ list-style:none; }
            .container-fluid li{display:inline-block;}
        </style>
        <body>

        <div id="app" class="container-fluid">
            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">功能组</button>
            <div id="demo" class="collapse">
                <button type="button" class="btn btn-success btn-round btn-sm"  style="margin-top: 10px"
                        @click="openAdd">
                    <span class="glyphicon glyphicon-plus">添加菜单</span>
                </button>
                <button type="button" class="btn btn-danger btn-round btn-sm"  style="margin-top: 10px">
                    <span class="glyphicon glyphicon-trash">批量删除菜单</span>
                </button>
                <ul>
                    <li><input type="text" class="form-control" style="width: 400px;height: 40px;margin-left: 400px" v-model="name" placeholder = '请输入菜单名查询！'></li>
                    <li><button class="btn btn-primary btn-round btn-sm" type="button" @click="selectData">
                        <span class="glyphicon glyphicon-search">查询菜单</span>
                    </button></li>
                </ul>
            </div>
                <a-table
                        style="padding-top: 30px;margin: auto;width: 1000px;"
                        row-Key="id"
                        :columns="columns"
                        :data-source="dataSources"
                        :pagination="pagination"
                        :row-Selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                        :custom-Row="customRow"
                        bordered>

                    <span slot="action" slot-scope="record" style="width: 100px">
                        <a-button size="small" type="primary"  @click.stop="openUpdate(record)">编辑</a-button>

                        <a-button size="small" type="danger"  @click.stop="deleteUser(record.id)">删除</a-button>
                    </span>
                </a-table>


                <!--bootstrap的模态对话框-->
                <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header bg-primary" style="background: #F45B4B;">
                                <h4 class="text-white">{{modalTitle}}</h4>
                                <button type="button" class="close text-white" data-dismiss="modal"
                                        aria-hidden="true">&times;</button>
                            </div>
                            <div class="modal-body">
                                <form role="form" id="addForm" class="form-horizontal">
                                    <div class="form-group">
                                        <label for="name" class="col-sm-2 control-label" style="padding-right: 0px" >菜单名称</label>
                                        <div class="col-sm-10" style="padding-left: 0px">
                                            <input type="text" class="form-control" id="name" name="name" v-model="name">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style="padding-right: 0px" >菜单图标</label>
                                        <div class="col-sm-10" style="padding-left: 0px">
                                            <input class="form-control" id="image" name="image"  v-model="image">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style="padding-right: 0px" >上级菜单</label>
                                        <div class="col-sm-10" style="padding-left: 0px">
                                            <template>
                                                <a-tree-select
                                                        id="orgTree"
                                                        v-model="parentid"
                                                        show-search
                                                        style="width: 100%"
                                                        tree-Node-Filter-Prop="title"
                                                        :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                                                        placeholder="请选择"
                                                        :tree-data="treeData"
                                                        tree-data-simple-mode
                                                        allow-clear
                                                        tree-default-expand-all
                                                        @change="orgTreeChange"
                                                >
                                                </a-tree-select>
                                            </template>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style="padding-right: 0px" >菜单路径</label>
                                        <div class="col-sm-10" style="padding-left: 0px">
                                            <input class=" form-control" id="leader" name="url"  v-model="url">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style="padding-right: 0px" >备注</label>
                                        <div class="col-sm-10" style="padding-left: 0px">
                                            <textarea class="form-control" id="beizhu" name="beizhu"  v-model="beizhu"></textarea>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                                <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <script th:src="@{/myjs/menu/main.js}"></script>
        </body>
    </html>
